<template>
    <div>{{ count }}</div>
    <button @click="count++">+</button>
</template>

<script setup>
import { ref, onMounted, onUpdated, onUnmounted} from 'vue'
const count = ref(0)

// 挂载
// 应用场景：初始化一些操作（绑定原生事件、开启时间器、发送ajax请求。。。）
let timer;
onMounted(() => {
    timer = setInterval(() => {
        console.log('身外身');
    }, 1000)
    console.log('挂载')
})
//更新
onUpdated(() => {
    console.log('更新')
})
//卸载
// 应用场景：解绑原生事件、取消定时器。。。
onUnmounted(() => {
    clearInterval(timer)
    console.log('卸载')
})
</script>
